<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="sortable">
        <title>Configuration, methods and events of Kendo UI Sortable</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/ui/sortable.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/ui/sortable.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendouisortable"><a href="#kendouisortable">kendo.ui.Sortable</a></h1>

<p>Represents the Kendo UI Sortable. Inherits from <a href="/api/javascript/ui/widget">Widget</a>.</p>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-axis">
<a href="#configuration-axis">axis </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: null)</em>
</h3>

<p>Constrains the hint movement to either the horizontal (x) or vertical (y) axis. Can be set to either "x" or "y".</p>

<h4>Example - initiate horizontally draggable Sortable widget</h4>

<pre><code>&lt;div id="sortable"&gt;
    &lt;span&gt;Item1&lt;/span&gt;
    &lt;span&gt;Item2&lt;/span&gt;
    &lt;span&gt;Item3&lt;/span&gt;
&lt;/div&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        axis: "x"
     });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-autoScroll">
<a href="#configuration-autoScroll">autoScroll </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>If set to <code>true</code> the widget will auto-scroll the container when the mouse/finger is close to the top/bottom of it.</p>

<h4>Example - use autoScroll in a scrollable container</h4>

<pre><code>&lt;div style="width: 200px; height: 200px; overflow: auto"&gt;
    &lt;div style="width: 1000px; height: 1000px;"&gt;
        &lt;div id="sortable"&gt;
            &lt;span&gt;Item 1&lt;/span&gt;
            &lt;span&gt;Item 2&lt;/span&gt;
            &lt;span&gt;Item 3&lt;/span&gt;
            &lt;span&gt;Item 4&lt;/span&gt;
            &lt;span&gt;Item 5&lt;/span&gt;
            &lt;span&gt;Item 6&lt;/span&gt;
            &lt;span&gt;Item 7&lt;/span&gt;
            &lt;span&gt;Item 8&lt;/span&gt;
            &lt;span&gt;Item 9&lt;/span&gt;
            &lt;span&gt;Item 10&lt;/span&gt;
            &lt;span&gt;Item 11&lt;/span&gt;
            &lt;span&gt;Item 12&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        autoScroll: true
     });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-container">
<a href="#configuration-container">container </a><code>String  |</code><code> jQuery</code><em>(default: null)</em>
</h3>

<p>Selector that determines the container to which boundaries the hint movement will be constrained.</p>

<h4>Example - initiate Sortable widget with hint movement constrains</h4>

<pre><code>&lt;div id="wrapper"&gt;
    &lt;ul id="sortable"&gt;
        &lt;li&gt;Item1&lt;/li&gt;
        &lt;li&gt;Item2&lt;/li&gt;
        &lt;li&gt;Item3&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        container: $("#wrapper")
     });
&lt;/script&gt;

&lt;style&gt;
    #wrapper {
        padding: 10px;
        width: 100px;
        border: 1px solid #FF0000;
    }
&lt;/style&gt;
</code></pre>

<h3 id="configuration-connectWith">
<a href="#configuration-connectWith">connectWith </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: null)</em>
</h3>

<p>Selector which determines if items from the current Sortable widget can be accepted from another Sortable container(s). The <code>connectWith</code> option describes <strong>one way</strong> relationship, if the developer wants a two way connection then the connectWith option should be set on both widgets.</p>

<blockquote>
<p>By default when the Sortable widget is left with no items its height will become zero. This will prevent the user from being able to drop items back into it. To avoid this behaviour the developer should set the min-height CSS property of the sortable container.</p>
</blockquote>

<h4>Example - set up a one way connection from ListA to ListB</h4>

<pre><code>&lt;ul id="listA"&gt;
    &lt;li&gt;ItemA1&lt;/li&gt;
    &lt;li&gt;ItemA2&lt;/li&gt;
    &lt;li&gt;ItemA3&lt;/li&gt;
&lt;/ul&gt;

&lt;ul id="listB"&gt;
    &lt;li&gt;ItemB1&lt;/li&gt;
    &lt;li&gt;ItemB2&lt;/li&gt;
    &lt;li&gt;ItemB3&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#listA").kendoSortable({
        connectWith: "#listB"
    });

    $("#listB").kendoSortable();
&lt;/script&gt;

&lt;style&gt;
    #listA li { background-color: #FF0000; }
    #listB li { background-color: #0000FF; }
&lt;/style&gt;
</code></pre>

<h4>Example - set up a bidirectional connection between Sortable widgets</h4>

<pre><code>&lt;ul id="listA"&gt;
    &lt;li&gt;ItemA1&lt;/li&gt;
    &lt;li&gt;ItemA2&lt;/li&gt;
    &lt;li&gt;ItemA3&lt;/li&gt;
&lt;/ul&gt;

&lt;ul id="listB"&gt;
    &lt;li&gt;ItemB1&lt;/li&gt;
    &lt;li&gt;ItemB2&lt;/li&gt;
    &lt;li&gt;ItemB3&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#listA").kendoSortable({
        connectWith: "#listB"
    });

    $("#listB").kendoSortable({
        connectWith: "#listA"
    });
&lt;/script&gt;

&lt;style&gt;
    #listA, #listB {
        border: 1px solid #000000;
        min-height: 20px;
    }

    #listA li { background-color: #FF0000; }
    #listB li { background-color: #0000FF; }
&lt;/style&gt;
</code></pre>

<h3 id="configuration-cursor">
<a href="#configuration-cursor">cursor </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "auto")</em>
</h3>

<p>The cursor that will be shown while user drags sortable item.</p>

<h4>Example - setting cursor to move</h4>

<pre><code>&lt;ul id="sortable"&gt;
    &lt;li&gt;ItemA1&lt;/li&gt;
    &lt;li&gt;ItemA2&lt;/li&gt;
    &lt;li&gt;ItemA3&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        cursor: "move"
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-cursorOffset">
<a href="#configuration-cursorOffset">cursorOffset </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: null)</em>
</h3>

<p>If set, specifies the offset of the hint relative to the mouse cursor/finger.
By default, the hint is initially positioned on top of the draggable source offset. The option accepts an object with two keys: <code>top</code> and <code>left</code>.</p>

<h4>Example - initialize Sortable with cursorOffset</h4>

<pre><code>&lt;ul id="sortable"&gt;
    &lt;li&gt;ItemA1&lt;/li&gt;
    &lt;li&gt;ItemA2&lt;/li&gt;
    &lt;li&gt;ItemA3&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        cursorOffset: { top: 30, left: 30 }
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-cursorOffset.left">
<a href="#configuration-cursorOffset.left">cursorOffset.left </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The left offset of the hint element relative to the mouse cursor/finger.</p>

<h3 id="configuration-cursorOffset.top">
<a href="#configuration-cursorOffset.top">cursorOffset.top </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The top offset of the hint element relative to the mouse cursor/finger.</p>

<h3 id="configuration-disabled">
<a href="#configuration-disabled">disabled </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: null)</em>
</h3>

<p>Selector that determines which items are disabled. <strong>Disabled items cannot be dragged but are valid sort targets</strong>.</p>

<h4>Example - disabled sortable items</h4>

<pre><code>&lt;ul id="sortable"&gt;
    &lt;li class="disabled"&gt;ItemA1&lt;/li&gt;
    &lt;li&gt;ItemA2&lt;/li&gt;
    &lt;li&gt;ItemA3&lt;/li&gt;
    &lt;li&gt;ItemA4&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        disabled: ".disabled"
    });
&lt;/script&gt;

&lt;style&gt;
    .disabled { color: #FF0000; }
&lt;/style&gt;
</code></pre>

<h3 id="configuration-filter">
<a href="#configuration-filter">filter </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: null)</em>
</h3>

<p>Selector that determines which items are sortable. <strong>Filtered items cannot be dragged and are not valid sort targets</strong>.</p>

<h4>Example - filtered sortable items</h4>

<pre><code>&lt;ul id="sortable"&gt;
    &lt;li class="filtered"&gt;ItemA1&lt;/li&gt;
    &lt;li&gt;ItemA2&lt;/li&gt;
    &lt;li&gt;ItemA3&lt;/li&gt;
    &lt;li&gt;ItemA4&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        filter: "&gt;li:not(.filtered)"
    });
&lt;/script&gt;

&lt;style&gt;
    .filtered { color: #FF0000; }
&lt;/style&gt;
</code></pre>

<h3 id="configuration-handler">
<a href="#configuration-handler">handler </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: null)</em>
</h3>

<p>Selector that determines which element will be used as a draggable handler. If a handler is defined, the user will be able to move the Sortable items only if the cursor/finger is positioned onto the handler element.</p>

<h4>Example - Sortable widget with drag handlers</h4>

<pre><code>&lt;ul id="sortable"&gt;
    &lt;li&gt;&lt;span class="handler"&gt;&lt;/span&gt;ItemA1&lt;/li&gt;
    &lt;li&gt;&lt;span class="handler"&gt;&lt;/span&gt;ItemA2&lt;/li&gt;
    &lt;li&gt;&lt;span class="handler"&gt;&lt;/span&gt;ItemA3&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        handler: ".handler"
    });
&lt;/script&gt;

&lt;style&gt;
    .handler {
        width: 16px;
        height: 16px;
        background-color: #FF0000;
        display: inline-block;
    }
&lt;/style&gt;
</code></pre>

<h3 id="configuration-hint">
<a href="#configuration-hint">hint </a><code>Function  |</code><code> String  |</code><code> jQuery</code>
</h3>

<p>Provides a way for customization of the sortable item hint. If a function is supplied, it receives one argument - the draggable element's jQuery object.
If hint function is not provided the widget will clone dragged item and use it as a hint.</p>

<blockquote>
<p><strong>Important: The hint element is appended to the <code>&lt;body&gt;</code> tag.</strong> The developer should have this in mind in order to avoid styling issues.</p>
</blockquote>

<h4>Example - Sortable with custom hint</h4>

<pre><code>&lt;ul id="sortable"&gt;
    &lt;li&gt;ItemA1&lt;/li&gt;
    &lt;li&gt;ItemA2&lt;/li&gt;
    &lt;li&gt;ItemA3&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        hint: function(element) {
            return $("&lt;span&gt;&lt;/span&gt;")
                    .text(element.text())
                    .css("color", "#FF0000");
        }
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-holdToDrag">
<a href="#configuration-holdToDrag">holdToDrag </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>Suitable for touch oriented user interface, in order to avoid collision with the touch scrolling gesture. When set to <code>true</code>, the item will be activated after the user taps and holds the finger on the element for a short amount of time.
The item will also be activated by pressing, holding and lifting the finger without any movement. Dragging it afterwards will initiate the drag immediately.</p>

<h4>Example - Sortable with holdToDrag enabled</h4>

<pre><code>&lt;ul id="sortable"&gt;
    &lt;li&gt;ItemA1&lt;/li&gt;
    &lt;li&gt;ItemA2&lt;/li&gt;
    &lt;li&gt;ItemA3&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        holdToDrag: true
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-ignore">
<a href="#configuration-ignore">ignore </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: null)</em>
</h3>

<p>Selector that determines which elements inside the sorted item's container will be ignored. <em>Useful if the sortable item contains input elements.</em></p>

<blockquote>
<p><strong>Important</strong> The <code>ignore</code> option is available in the latest internal build! This feature is <strong>not</strong> included in Q1 2014 (v2014.1.318).</p>
</blockquote>

<h4>Example - Sortable widget with input elements</h4>

<pre><code>&lt;ul id="sortable"&gt;
    &lt;li&gt;ItemA1 &lt;input type="text" /&gt;&lt;/li&gt;
    &lt;li&gt;ItemA2 &lt;input type="text" /&gt;&lt;/li&gt;
    &lt;li&gt;ItemA3 &lt;input type="text" /&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        ignore: "input"
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-placeholder">
<a href="#configuration-placeholder">placeholder </a><code>Function  |</code><code> String  |</code><code> jQuery</code>
</h3>

<p>Provides a way for customization of the sortable item placeholder. If a function is supplied, it receives one argument - the draggable element's jQuery object.
If placeholder function is not provided the widget will clone dragged item, remove its ID attribute, set its visibility to hidden and use it as a placeholder.</p>

<blockquote>
<p>**Important: The placeholder element is appended to the Sortable widget container.</p>
</blockquote>

<h4>Example - Sortable with custom placeholder</h4>

<pre><code>&lt;ul id="sortable"&gt;
    &lt;li&gt;ItemA1&lt;/li&gt;
    &lt;li&gt;ItemA2&lt;/li&gt;
    &lt;li&gt;ItemA3&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        placeholder: function(element) {
            return element.clone().css({
                "opacity": 0.3,
                "border": "1px dashed #000000"
            });
        }
    });
&lt;/script&gt;
</code></pre>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-indexOf"><a href="#methods-indexOf">indexOf</a></h3>

<p>Returns the index of specified item. <strong>Filtered items are excluded from the collection.</strong></p>

<blockquote>
<p><strong>Important:</strong> While user drags to sort the original item is hidden and the placeholder is appended to the Sortable collection. This is why jQuery's <code>index</code> method might return incorrect results. When the developer wants to find the index of a given item it is recommended to use widget's <code>indexOf</code> method.</p>
</blockquote>

<h4>Parameters</h4>

<h5>element <a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>jQuery object which represents the sortable element.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> the index of specified item.</p>

<h4>Example - working with indexOf method</h4>

<pre><code>&lt;div id="sortable"&gt;
    &lt;h4&gt;Sortable List&lt;/h4&gt;
    &lt;div&gt;Item1&lt;/div&gt;
    &lt;div&gt;Item2&lt;/div&gt;
    &lt;div&gt;Item3&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        filter: "&gt;div",
        move: function(e) {
            //NOTE: the heading element will be excluded from the
            //collection as it does not match the filter

            //shows the original position of the item
            console.log("index of item", this.indexOf(e.item));
            //shows the position where item will be moved to
            console.log("index of placeholder", this.indexOf(this.placeholder));
        }
    });
&lt;/script&gt;
</code></pre>

<h3 id="methods-items"><a href="#methods-items">items</a></h3>

<p>Returns the sortable elements. <strong>Filtered items and the placeholder are excluded from the collection.</strong></p>

<blockquote>
<p><strong>Important:</strong> While user drags to sort the original item is hidden and the placeholder is appended to the Sortable collection. This is why jQuery's <code>children</code> method might return incorrect results. When the developer wants to obtain the sortable items it is recommended to use widget's <code>items</code> method.</p>
</blockquote>

<h4>Returns</h4>

<p><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a> the sortable items</p>

<h4>Example - using the items method</h4>

<pre><code>&lt;div id="sortable"&gt;
    &lt;h4&gt;Sortable List&lt;/h4&gt;
    &lt;div&gt;Item1&lt;/div&gt;
    &lt;div&gt;Item2&lt;/div&gt;
    &lt;div&gt;Item3&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    var sortable = $("#sortable").kendoSortable({
        filter: "&gt;div"
    }).data("kendoSortable");

    console.log(sortable.items());
&lt;/script&gt;
</code></pre>

<h2 id="events"><a href="#events">Events</a></h2>

<h3 id="events-start"><a href="#events-start">start</a></h3>

<p>Fires when sortable item drag starts.</p>

<h4>Event Data</h4>

<h5>e.draggableEvent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original draggable's dragstart event data.</p>

<h5>e.item <a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>The element that will be dragged.</p>

<h5>e.preventDefault <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h5>

<p>If invoked prevents the drag start action. The element will remain at its original position. The hint and placeholder will not be initialized.</p>

<h4>Example - prevent certain item from being sorted by cancelling the drag start action</h4>

<pre><code>&lt;ul id="sortable"&gt;
    &lt;li&gt;Item1&lt;/li&gt;
    &lt;li&gt;Item2&lt;/li&gt;
    &lt;li&gt;Item3&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        start: function(e) {
            if(e.item.text() === "Item1") {
                e.preventDefault();
            }
        }
    });
&lt;/script&gt;
</code></pre>

<h3 id="events-move"><a href="#events-move">move</a></h3>

<p>Fires when Sortable's placeholder changes its position.</p>

<h4>Event Data</h4>

<h5>e.item <a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>The element that is dragged.</p>

<h5>e.target <a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>The target element under cursor against which placeholder is positioned.</p>

<h5>e.list <code>kendo.ui.Sortable</code>
</h5>

<p>The Sortable widget instance which the item belongs to (useful in case there are connected Sortable widgets).</p>

<h5>e.draggableEvent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original draggable's drag event data.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="sortable"&gt;
    &lt;li&gt;Item1&lt;/li&gt;
    &lt;li&gt;Item2&lt;/li&gt;
    &lt;li&gt;Item3&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        move: function(e) {
            console.log("move to index: " + this.indexOf(this.placeholder));
        }
    });
&lt;/script&gt;
</code></pre>

<h3 id="events-end"><a href="#events-end">end</a></h3>

<p>Fires when item dragging ends but before the item's position is changed in the DOM. This event is suitable for preventing the sort action.</p>

<h4>Event Data</h4>

<h5>e.action <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>Possible values are: "sort" - indicates that item's position was changed inside the same Sortable container; "remove" - indicates that the item was removed from current Sortable widget; "receive" - indicates that the item was received by a connected Sortable widget instance;</p>

<h5>e.preventDefault <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h5>

<p>If invoked prevents the sort action. The element will be reverted at its original position. The hint and placeholder will be destroyed.</p>

<h5>e.item <a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>The element that is dragged.</p>

<h5>e.oldIndex <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h5>

<p>The original position of the item in the Sortable collection. In case the item is received from connected Sortable the value will be -1</p>

<h5>e.newIndex <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h5>

<p>The position where item will be placed. In case the item is removed from connected Sortable the value will be -1</p>

<h5>e.draggableEvent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original draggable's drag event data.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="sortable"&gt;
    &lt;li&gt;Item1&lt;/li&gt;
    &lt;li&gt;Item2&lt;/li&gt;
    &lt;li&gt;Item3&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        end: function(e) {
            console.log("from " + e.oldIndex + " to " + e.newIndex);

            //prevent first item to be placed at the end of the list
            if(e.newIndex == 2 &amp;&amp; e.oldIndex == 0) {
                e.preventDefault();
            }
        }
    });
&lt;/script&gt;
</code></pre>

<h3 id="events-change"><a href="#events-change">change</a></h3>

<p>Fires when item is sorted and the item's position is changed in the DOM.</p>

<blockquote>
<p>Important: This event cannot be prevented. If this is required the developer should use the <code>end</code> event.</p>
</blockquote>

<h4>Event Data</h4>

<h5>e.action <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>Possible values are: "sort" - indicates that item's position was changed inside the same Sortable container; "remove" - indicates that the item was removed from current Sortable widget; "receive" - indicates that the item was received by a connected Sortable widget instance;</p>

<h5>e.item <a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>The element that is dragged.</p>

<h5>e.oldIndex <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h5>

<p>The original position where the item was located at. In case the item is received from connected Sortable the value will be -1</p>

<h5>e.newIndex <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h5>

<p>The position where item is placed. In case the item is removed from connected Sortable the value will be -1</p>

<h5>e.draggableEvent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original draggable's drag event data.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="sortable"&gt;
    &lt;li&gt;Item1&lt;/li&gt;
    &lt;li&gt;Item2&lt;/li&gt;
    &lt;li&gt;Item3&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        change: function(e) {
            console.log("from " + e.oldIndex + " to " + e.newIndex);
        }
    });
&lt;/script&gt;
</code></pre>

<h3 id="events-cancel"><a href="#events-cancel">cancel</a></h3>

<p>Fires when item sorting is canceled by pressing the Escape key.</p>

<h4>Event Data</h4>

<h5>e.item <a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>The element that is dragged.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="sortable"&gt;
    &lt;li&gt;Item1&lt;/li&gt;
    &lt;li&gt;Item2&lt;/li&gt;
    &lt;li&gt;Item3&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#sortable").kendoSortable({
        cancel: function(e) {
            console.log(e.item.text() + " sorting called!");
        }
    });
&lt;/script&gt;
</code></pre> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

